Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  font-size: 50px;
  gap: 0.25em;
}

.toggle {
  --color: #000;
  --color2: #fff;
  --time: 0.35s;
  --p00: -2.5em;
  --p01: -2.5em;
  --p02: -2.5em;
  --p03: -2.5em;
  --p04: -2.5em;
  --p05: -2.5em;
  --p06: -2.5em;
  --p07: -2.5em;
  --p08: -2.5em;
  --p09: -2.5em;
  --p10: -2.5em;
  --p11: -2.5em;
  --p12: -2.5em;
  --p13: -2.5em;
  --p14: -2.5em;
  --p15: -2.5em;
  --p16: -2.5em;
  --p17: -2.5em;
  --p18: -2.5em;
  --p19: -2.5em;
  
  color: var(--color);
  appearance: none;
  position: relative;
  font-size: 1em;
  box-sizing: content-box;
  height: 1em;
  width: 2.5em;
  border: max(1px, 0.05em) solid;
  background:
    linear-gradient(var(--color2) 0 0) calc(100% - 0.2em) 50% / 0.6em 0.6em,
    linear-gradient(var(--color) 0 0) var(--p00) 0.00em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p01) 0.05em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p02) 0.10em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p03) 0.15em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p04) 0.20em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p05) 0.25em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p06) 0.30em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p07) 0.35em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p08) 0.40em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p09) 0.45em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p10) 0.50em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p11) 0.55em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p12) 0.60em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p13) 0.65em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p14) 0.70em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p15) 0.75em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p16) 0.80em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p17) 0.85em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p18) 0.90em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p19) 0.95em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) 0.2em 50% / 0.6em 0.6em
    ;
  background-repeat: no-repeat;
      transition: 
      --p00 var(--time) 0.00s linear,
      --p01 var(--time) 0.01s ease-in,
      --p02 var(--time) 0.02s ease-out,
      --p03 var(--time) 0.03s ease-in-out,
      --p04 var(--time) 0.04s ease,
      --p05 var(--time) 0.05s cubic-bezier(0.1, 0.7, 1, 0.1),
      --p06 var(--time) 0.06s linear,
      --p07 var(--time) 0.07s ease-in,
      --p08 var(--time) 0.08s ease-out,
      --p09 var(--time) 0.09s ease-in-out,
      --p10 var(--time) 0.10s ease,
      --p11 var(--time) 0.11s cubic-bezier(0.1, 0.7, 1, 0.1),
      --p12 var(--time) 0.12s linear,
      --p13 var(--time) 0.13s ease-in,
      --p14 var(--time) 0.14s ease-out,
      --p15 var(--time) 0.15s ease-in-out,
      --p16 var(--time) 0.16s ease,
      --p17 var(--time) 0.17s cubic-bezier(0.1, 0.7, 1, 0.1),
      --p18 var(--time) 0.18s linear,
      --p19 var(--time) 0.19s ease-in;
  
  &::before {
    content: "";
    width: 0.6em;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 0.5em;
    background: #f000;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: max(1px, 0.05em) solid #0000;
  }

&:checked {
    --p00: 0em;
    --p01: 0em;
    --p02: 0em;
    --p03: 0em;
    --p04: 0em;
    --p05: 0em;
    --p06: 0em;
    --p07: 0em;
    --p08: 0em;
    --p09: 0em;
    --p10: 0em;
    --p11: 0em;
    --p12: 0em;
    --p13: 0em;
    --p14: 0em;
    --p15: 0em;
    --p16: 0em;
    --p17: 0em;
    --p18: 0em;
    --p19: 0em;
    
    &::before {
      left: calc(100% - 0.5em);
    }
  }
  
  &[disabled] {
    opacity: 0.25;
  }
}

@media print {
  .toggle {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .toggle {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}

@property --p00 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p01 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p02 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p03 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p04 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p05 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p06 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p07 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p08 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p09 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p10 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p11 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p12 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p13 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p14 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p15 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p16 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p17 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p18 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p19 { syntax: '<length>'; inherits: true; initial-value: 0px; }

Frontend Forever App